<template>
	<view class="head">

		<view class="btgourd">
			<view class="me_img">
				<image class="image" :src="userimg"></image>
				<view class="bigsize">{{name}}</view>
				<view class="minsize">ID:{{unionId}}</view>
			</view>
		</view>
		<!-- 其他信息 -->
		<view class="list_all" style="margin: 20rpx auto;">
			<text>个人基本信息</text>
			<view style="border-bottom: 1rpx solid #e7e7e7; display: flex; justify-content: space-between;">
				<view class="size">性别：</view>
				<view class="size">{{gender}}</view>
			</view>
			<view style="border-bottom: 1rpx solid #e7e7e7; display: flex; justify-content: space-between;">
				<view class="size">城市：</view>
				<view class="size">{{city}}</view>
			</view>
			<view style="border-bottom: 1rpx solid #e7e7e7; display: flex; justify-content: space-between;">
				<view class="size">省份：</view>
				<view class="size">{{province}}</view>
			</view>

		</view>
		<view class="list_all">
			<text>应用功能</text>
			<view class="list1" @click="play">
				<view class="after">
					<view class="icon iconfont icon-zhifu bigsize" style=" color: #007AFF;"></view>
					<view class="size" style="margin-left: 30rpx;">支付</view>
				</view>
				<view class="icon iconfont icon-youjiantou bigsize" style="font-size: 42rpx;"></view>
			</view>

		</view>
		<view class="list_all" @click="star">
			<view class="list1">
				<view class="after">
					<view class="icon iconfont icon-shoucang1 bigsize" style="color:#ee0003;"></view>
					<view class="size" style="margin-left: 30rpx;">收藏</view>
				</view>
				<view style="display: flex;">
					<view class="size icon iconfont icon-yuandianxiao" style="margin-left: 30rpx;font-size: 42rpx; color: red;"></view>
					<view class="icon iconfont icon-youjiantou bigsize" style="font-size: 42rpx;"></view>
				</view>
			</view>

		</view>

		<view class="list_all">
			<view class="list1" @click="changeuser">
				<view class="after">
					<view class="icon iconfont icon-shezhi bigsize" style="color: #0A98D5;"></view>
					<view class="size" style="margin-left: 30rpx;">设置</view>
				</view>
				<view style="display: flex;">
					<view class="size icon iconfont icon-yuandianxiao" style="margin-left: 30rpx;font-size: 42rpx; color: red;"></view>
					<view class="icon iconfont icon-youjiantou bigsize" style="font-size: 42rpx;"></view>
				</view>
			</view>

		</view>
		<view class="list_all">
			<text>辅助功能</text>
			<view class="list1" @click="update">
				<view class="after">
					<view class="icon iconfont icon-gengxin bigsize" style="color: #9900d5;"></view>
					<view class="size" style="margin-left: 30rpx;">版本检查</view>
				</view>
				<view style="display: flex;">
					<view class="size" style="margin-left: 30rpx;">1.0.13</view>
					<view class="icon iconfont icon-youjiantou bigsize" style="font-size: 42rpx;"></view>
				</view>
			</view>

		</view>
		<view class="list_all">
			<view class="list1" @click="about">
				<view class="after">
					<view class="icon iconfont icon-guanyu bigsize" style="color: #9900d5;"></view>
					<view class="size" style="margin-left: 30rpx;">关于软件/源码</view>
				</view>
				<view style="display: flex;">
					<!-- <view class="size" style="margin-left: 30rpx;"></view>
					<view class="icon iconfont icon-youjiantou bigsize" style="font-size: 42rpx;"></view> -->
				</view>
			</view>

		</view>
		<view class="list_all">

			<view class="list1" @click="exit">
				<view class="after">
					<view class="icon iconfont icon-tuichu bigsize" style="color: #ffb400;"></view>
					<view class="size" style="margin-left: 30rpx; border-bottom: 0px;">退出登录</view>
				</view>

			</view>

		</view>
		<!-- 确定vue -->
		<view class="content">

			<Modal v-model="show" title='温馨提示' text='你即将退出账号' @cancel='cancel' @confirm='confirm' />
		</view>
		<!-- 等待 -->

	<view v-if="loading">
			 <ourLoading active text="loading..." />
		</view>
	</view>

</template>

<script>
	// 导入弹出vue
	import Modal from '../../components/x-modal/x-modal.vue';
	// 等待
	import ourLoading from '@/components/our-loading/our-loading.vue'
	export default {
		data() {
			return {
				token: '',
				userimg: '',
				name: '',
				unionId: '',
				gender: '',
				city: '',
				province: '',
				// 退出框
				show: false,
				loading:false
			}
		},
		methods: {
			// changeuser
			changeuser() {
				uni.navigateTo({
					url: "../../view/userinfo/userinfo"
				})
			},
			// 更新版本
			update() {
				this.loading=true
						setTimeout(() => {
							this.loading=false
							try
							{
								plus.runtime.openURL("https://gitee.com/ani-qi/resources/blob/master/__UNI__1549609_0905161703.apk")
							}
							catch
							{
								uni.showToast({
									icon: "none",
									title: "抱歉您当前的环境不是APP，不能自动下载",
									success() {
									}
								})
							}
							
						}, 2500)

			},
			// 关于我们
			about() {
				uni.navigateTo({
					url: "../../pageA/aboutthis/aboutthis"
				})
			},
			// star
			star() {
				uni.showToast({
					icon: "none",
					title: "该页面还没想好！"
				})
			},
			// 支付钱模拟
			play() {
				try {
					// 获取jyAlipay对象
					const jyAliPay = uni.requireNativePlugin('JY-ALIPAY')
					jyAliPay.show({ // 发起支付
						if_sanbox: true,
						auto_create_order_info: false,
						appid: '',
						rsa2_private: "",
						order_info: ""
					}, function(result) { // 支付完成回调
						if (result.resultStatus == '5002555') {
							that.vusui.msg('支付sdk出错')
						} else if (result.resultStatus == '9000') {
							that.vusui.msg('支付成功')
						} else {
							that.vusui.msg(result.memo)
						}
					});
				} catch {
					uni.showToast({
						icon: "none",
						title: "当前的环境，不能支付!自动切换到钱包",
						success() {
							setTimeout(() => {
								uni.navigateTo({
									url: "../../pageA/webview/webview"
								})
							}, 1500)

						}
					})
				}
			},
			// 退出
			// 组件事件（退出）
			cancel(e) {
				console.log(e);
			},
			confirm(e) {
				// 异步清除key
				uni.removeStorage({
					key: "userInfo"
				})
				// 异步清除登录状态
				uni.removeStorage({
					key: "login_status"
				})
				// 进行页面的跳转
				uni.redirectTo({
					url: "../login/login",
					fail() {
						uni.showToast({
							icon: "none",
							title: "返回登录页面错误"
						})
					}
				})
			},
			exit() {
				this.show = true
			}
		},
		onLoad(option) {
			// this.jkjk()
			// 获取本地的数据
			// 修复微信小程序的登录状态
			//#ifdef MP-WEIXIN
			uni.getStorage({
				key: "xiaochengxu",
				success: res => {
					let arrys = res.data
					this.name = arrys.nickName
					this.userimg = arrys.avatarUrl
					this.unionId = arrys.country
					this.city = arrys.city
					this.province = arrys.province
					// 处理性别
					if (arrys.gender == 1) {
						this.gender = '男'
					} else if (arrys.gender == 0) {
						this.gender = "女"
					} else {
						this.gender = "还未填写"
					}
				}

			})
			// #endif


			uni.getStorage({
				key: "userInfo",
				success: res => {
					let arrys = res.data
					this.name = arrys.nickName
					this.userimg = arrys.avatarUrl
					this.unionId = arrys.unionId
					this.city = arrys.city
					this.province = arrys.province
					// 处理性别
					if (arrys.gender == 1) {
						this.gender = '男'
					} else if (arrys.gender == 0) {
						this.gender = "女"
					} else {
						this.gender = "还未填写"
					}
				}

			})

		},
		components: {
			Modal,
			ourLoading
		}
	}
</script>

<style lang="less" scoped>
	// 全局size
	.withsize {
		font-size: 40rpx;
	}

	.bigsize {
		font-size: 38rpx;
		font-weight: bold;
	}

	.size {
		font-size: 36rpx;
	}

	.minsize {
		color: #fcfcfc;
		font-size: 30rpx;
	}

	.btgourd {
		width: 100%;
		background-size: 100% 100%;
		height: 100px;
		background-image: url("http://ani-qi.gitee.io/resources/ccc.jpg");;
		padding-top: 60px;
	}

	.head {
		.me_img {
			width: 90%;
			margin: 0 auto;

			.image {
				float: left;
				width: 125rpx;
				height: 125rpx;
				border-radius: 20rpx;
				margin-right: 25rpx;
			}
		}

		.list_all {
			width: 90%;
			// background-color: red;
			margin: 20rpx auto;

			.list1 {
				border-bottom: 2rpx solid #D9D9D9;
				display: flex;
				margin: 20rpx auto;
				justify-content: space-between;

				.after {
					display: flex;
				}


			}
		}
	}
</style>
